import { Form, Input } from "@/components/base";
import React from "react";


/** 用户的 form item */
export function FormItemUser(props: {
    /** 密码是否必填 */
    passwordRequired?: boolean;

    /** 用户名是否禁用*/
    usernameEditable?: boolean;
}) {
    const { passwordRequired = true, usernameEditable=false } = props;
    const [password, setPassword] = React.useState<string>('');
    return (
        <>
            <Form.Item key='username' label='用户名' name='username'
                rules={[
                    { required: true },
                    { min: 3, message: '用户名至少3个字符' },
                    { max: 20, message: '用户名最多20个字符' },
                    { pattern: /^[a-zA-Z0-9_]+$/, message: '用户名只能包含字母、数字和下划线' }
                ]}>
                <Input placeholder='请输入用户名' disabled={usernameEditable} />
            </Form.Item>

            <Form.Item key='nickname' label='昵称' name='nickname'
                rules={[
                    { required: true },
                    { min: 2, message: '用户名至少3个字符' },
                    { max: 20, message: '用户名最多20个字符' }
                ]}>
                <Input placeholder='请输入昵称' />
            </Form.Item>

            <Form.Item key='email' label='邮箱' name='email'
                rules={[
                    { required: true, message: '请输入邮箱' },
                    { type: 'email', message: '请输入有效的邮箱地址' },
                    { max: 100, message: '邮箱最多100个字符' }
                ]}>
                <Input placeholder='请输入邮箱' />
            </Form.Item>

            <Form.Item key='phone' label='手机' name='phone'
                rules={[
                    { required: true, message: '请输入手机号码' },
                    { pattern: /^1[3-9]\d{9}$/, message: '请输入有效的手机号码' },
                    { max: 20, message: '手机号码最多20个字符' }
                ]}>
                <Input placeholder='请输入手机号码' />
            </Form.Item>

            <Form.Item key='password' label='密码' name='password'
                rules={[
                    { required: passwordRequired },
                    { min: 6, message: '密码至少6个字符' },
                    { max: 20, message: '密码最多20个字符' }
                ]}>
                <Input.Password placeholder='请输入密码' onChange={e => { setPassword(e.target.value) }} />
            </Form.Item>

            <Form.Item key='confirmPassword' label='确认密码' name='confirmPassword'
                dependencies={['password']}
                rules={[
                    { required: passwordRequired || !!password, message: '请确认密码' },
                    ({ getFieldValue }) => ({
                        validator(_, value) {
                            if(!(passwordRequired || !!password)) return Promise.resolve();
                            if (!value || getFieldValue('password') === value) {
                                return Promise.resolve();
                            }
                            return Promise.reject(new Error('两次输入的密码不一致'));
                        },
                    }),
                ]}>
                <Input.Password placeholder='请再次输入密码' />
            </Form.Item>

            <Form.Item key='remarks' label='备注' name='remarks'
                rules={[
                    { max: 500, message: '备注最多500个字符' }
                ]}>
                <Input.TextArea placeholder='请输入备注' />
            </Form.Item>
        </>
    )
}